import React from 'react'
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'
import App from '../App'
import { 
  Points,
  Plane,
  CSSObject
 } from '../views'

 import {
  BufferGeometry
 } from '../views/BufferGeometry'

 import { AmmoDemo } from '../views/AmmoDemo'
 import MaterialDemo from '../views/MaterialDemo'
 import BoxGeometry from '../views/BoxGeometry'
 import BufferGeometryII from '../views/BufferGeometryII'
 import BufferGeometryIII from '../views/BufferGeometryIII'
 import BufferGeometryIV from '../views/BufferGeometryIV'
 import VertexColor from '../views/VertexColor'
 import VertexColorII from '../views/VertexColorII'
 import Full from '../views/Full'
 import MapGeometry from '../views/MapGeometry'
 import ModelTest from '../views/ModelTest'
 import FbxLoader from '../views/FbxLoader'
 import {
   demo1
 } from '../views/WebGLDemo'

 const routerArr = [
  {
    path: '/',
    name: '首页',
    component: App,
    exact: true
  },
  {
    path: '/Points',
    name: '粒子操作',
    component: Points
  },
  {
    path: '/Plane',
    name: '地形图',
    component: Plane
  },
  {
    path: '/CSSObject',
    name: 'CSS3对象',
    component: CSSObject
  },
  {
    path: '/BufferGeometry',
    name: '几何体',
    component: BufferGeometry
  },
  {
    path: '/BoxGeometry',
    name: '几何体1',
    component: BoxGeometry
  },
  {
    path: '/BufferGeometryII',
    name: '几何体2',
    component: BufferGeometryII
  },
  {
    path: '/BufferGeometryIII',
    name: '几何体3',
    component: BufferGeometryIII
  },
  {
    path: '/BufferGeometryIV',
    name: '几何体4',
    component: BufferGeometryIV
  },
  {
    path: '/VertexColor',
    name: '着色demo',
    component: VertexColor
  },
  {
    path: '/VertexColorII',
    name: '着色demo2',
    component: VertexColorII
  },
  {
    path: '/AmmoDemo',
    name: '刚体',
    component: AmmoDemo
  },
  {
    path: '/MaterialDemo',
    name: '材质',
    component: MaterialDemo
  },
  {
    path: '/Full',
    name: '全景',
    component: Full
  },
  {
    path: '/MapGeometry',
    name: '地图',
    component: MapGeometry
  },
  {
    path: '/WebGLdemo1',
    name: 'WebGlDemo1',
    component: demo1
  },
  {
    path: '/ModelTest',
    name: '模型测试',
    component: ModelTest
  },
  {
    path: '/FbxLoader',
    name: 'FbxLoader',
    component: FbxLoader
  }
 ]


// 注册所有的路由
 const RouteReg = () => routerArr.map(route => <Route key={route.path} {...route}/>)
// 根据注册路由生成link
 const myNav = () => (
   <ul className="nav">
     { routerArr.map(route => (<li key={route.path}><Link to={route.path}>{route.name}</Link></li>) ) }
   </ul>
 )

const MyRouter = () => {
  return(
    <div className="container" style={{height: window.innerHeight}}>
      <Router >
        { myNav() }
        <div className="view" style={{width: window.innerWidth - 180}}>
          <Switch>
            { RouteReg() }
          </Switch>
        </div>
      </Router>
    </div>
  )
}
export default MyRouter
export {
  MyRouter
}